{% extends 'mainapp/base.html' %}
{% load email_to_link %}
{% block content %}

    <p>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Наши контакты</h1>
            <p class="lead">Обязательно свяжитесь с нами! Ваш комфорт - наша забота.</p>
            <div class="row">
                <form method="post" class="form-group col-4">
                    {% csrf_token %}
                    <textarea class="form-control" name="message_body"></textarea>
                    <input type="submit" class="btn btn-primary" value="Отправить"/>
                </form>
            </div>
        </div>
    </div>
    </p>
    <p>
    <div class="row justify-content-around mt-n2">
        {% for contact in contacts %}
            <div class="col-sm-6 col-md-6 col-lg-4 pb-2">
                <div class="card h-100 shadow">
                    <div class="card-body">
                        <div style="position:relative;overflow:hidden;">
                            <iframe src="{{ contact.map }}" width="100%" height="300"
                                    frameborder="0" allowfullscreen="true"
                                    style="position:relative; border-radius: 4px;"></iframe>
                        </div>
                        <h5 class="card-title">{{ contact.city }}</h5>
                        <p class="card-text">
                        <ul class="list-unstyled">
                            <li>Телефон</li>
                            <li><strong>{{ contact.phone }}</strong></li>
                        </ul>
                        <ul class="list-unstyled">
                            <li>Email</li>
                            <li><strong>{{ contact.email|email_to_link }}</strong></li>
                        </ul>
                        <ul class="list-unstyled">
                            <li>Адрес</li>
                            <li><strong>{{ contact.address }}</strong></li>
                        </ul>
                        </p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    </p>

{% endblock %}